<template>
  <el-submenu v-if="menuNav.list && menuNav.list.length >= 1" :index="menuNav.menuId + ''">
    <template slot="title">
      <i :class="['site-sidebar__menu-icon', menuNav.icon ? menuNav.icon : '']"></i>
      <span>{{ menuNav.title }}</span>
    </template>
    <sub-menu-nav v-for="item in menuNav.list" :key="item.menuId" :menu-nav="item">
    </sub-menu-nav>
  </el-submenu>
  <el-menu-item v-else :index="menuNav.menuId + ''" @click="gotoRouteHandle(menuNav.routeName)">
    <i :class="['site-sidebar__menu-icon iconfont', menuNav.icon ? menuNav.icon : '']"></i>
    <span>{{ menuNav.title }}</span>
  </el-menu-item>
</template>
<script>
import SubMenuNav from '../sub-menu-nav'
export default {
  name: 'sub-menu-nav',
  props: {
    menuNav: Object,
    required: true
  },
  components: {
    SubMenuNav
  },
  methods: {
    // 跳转到菜单导航对应路由
    gotoRouteHandle (routeName) {
      this.$router.push({ name: routeName })
    }
  }
}
</script>
